<template>
  <div>
    <el-dialog class="update_dialog" title="更新数据" center :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal='false'>
      <el-form ref="form" :rules="rules" :model="updateForm" label-width="130px">
        <el-form-item label="状态" prop="status">
          <!-- <el-input v-model="updateForm.status"></el-input> -->
          <el-select v-model="updateForm.status" placeholder="请选择流程状态" >
            <el-option label="等待提交国知局" value="等待提交国知局"></el-option>
            <el-option label="已提交国知局" value="已提交国知局"></el-option>
            <el-option label="等待补正" value="等待补正"></el-option>
            <el-option label="已补正" value="已补正"></el-option>
            <el-option label="等待答复" value="等待答复"></el-option>
            <el-option label="已答复" value="已答复"></el-option>
            <el-option label="初步审查合格" value="初步审查合格"></el-option>
            <el-option label="实质审查中" value="实质审查中"></el-option>
            <el-option label="驳回" value="驳回"></el-option>
            <el-option label="授权" value="授权"></el-option>
            <el-option label="下证" value="下证"></el-option>
            <el-option label="撤案" value="撤案"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请号" prop="application_number">
          <el-input v-model="updateForm.application_number" ></el-input>
        </el-form-item>
        <el-form-item label="申请机构" prop="organization">
          <!-- <el-input v-model="updateForm.organization"></el-input> -->
          <el-select v-model="updateForm.organization" placeholder="请选择申请机构" >
            <el-option label="XH" value="XH"></el-option>
            <el-option label="XHHG" value="XHHG"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间" prop="submit_at">
          <el-date-picker
            v-model="updateForm.submit_at"
            type="date"
            value-format='yyyy-MM-dd'
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="缴纳年费日期" prop="pay_annual_fee_date">
          <el-date-picker
            v-model="updateForm.pay_annual_fee_date"
            type="date"
            value-format='yyyy-MM-dd'
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-no-more-click:3000 type="primary" @click="submitUpdate('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      updateForm: {
        status: '',
        application_number: '',
        organization: '',
        submit_at: '',
        pay_annual_fee_date: ''
      },
      rowData: {},
      rules: {
        status:[
          { required: true, message: '请选择流程状态', trigger: 'blur' },
        ],
        application_number:[
          { required: true, message: '请输入申请号', trigger: 'blur' },
        ],
        organization:[
          { required: true, message: '请选择申请机构', trigger: 'blur' },
        ],
        submit_at:[
          { required: true, message: '请选择提交时间', trigger: 'blur' },
        ],
        pay_annual_fee_date:[
          {message: '请选择缴纳年费日期', trigger: 'blur' },
        ],
      }
    }
  },
  props: [],
  methods: {
    handleClose () {
      this.dialogVisible = false
      this.updateForm = {
        status: '',
        application_number: '',
        organization: '',
        submit_at: '',
        pay_annual_fee_date: ''
      }
    },
    show (val) {
      this.rowData = val;
      this.updateForm = {
        status: '',
        application_number: '',
        organization: '',
        submit_at: '',
        pay_annual_fee_date: ''
      }
      if (this.rowData) {
        this.updateForm.status = this.rowData.status ? this.rowData.status : ''
        this.updateForm.application_number = this.rowData.application_number ?  this.rowData.application_number : ''
        this.updateForm.organization = this.rowData.organization ?  this.rowData.organization : ''
        this.updateForm.submit_at  = this.rowData.submit_at ? this.rowData.submit_at : ''
        this.updateForm.pay_annual_fee_date  = this.rowData.pay_annual_fee_date ? this.rowData.pay_annual_fee_date : ''
      }
      this.updateForm.finals = this.rowData.id
      this.dialogVisible = true;
    },
    submitUpdate (formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if (this.updateForm.pay_annual_fee_date == '') {

          }
          let params = {
            status: this.updateForm.status,
            application_number: this.updateForm.application_number,
            organization: this.updateForm.organization,
            submit_at: this.updateForm.submit_at,
          } 
          if (this.updateForm.pay_annual_fee_date != '') {
            params.pay_annual_fee_date = this.updateForm.pay_annual_fee_date
          }
          this.$axios.put(`api/finals/${this.updateForm.finals}`, params)
          .then( res => {
            if (res.data.code == 200) {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.$emit('refresh')
              // this.$router.go(0)
            }
          })
        }
      })

    }
  }
}
</script>

<style lang="less">
  .update_dialog {
    .el-date-editor {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }


</style>
